<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载组件</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  beforeUpdate() {
    console.log(this.count);
    debugger;
  },

  updated() {
    console.log(this.count);
    debugger;
  },

  /* 
    当组件收到销毁的指令时,会调用beforeDestroy钩子函数
    在当前的生命周期函数中,所有的功能都是正常的!!!!
    但是最好不要再修改数据了!!!!
    在这个生命周期函数中一般来处理收尾的工作(关闭定时器,取消订阅,解绑自定义事件等等)
  */
  beforeDestroy() {
    console.log(this);
    this.count = 10;
    debugger;
  },

  /* 
    在destroyed之前,vue取消了观察(数据双向绑定),并且把子组件内部的事件等等都拆卸掉了
    注意:在destroyed中还是可以访问vm的,只不过是切断了vm和视图之前的联系
  */
  destroyed() {
    console.log(this);
  },

  methods: {
    destroy() {
      this.$destroy();
    },
  },
};
</script>

<style>
</style>